﻿@model HQPad.Models.IconItem

@{
    string hiddenFieldName = (string)ViewBag.FieldName;
    string containerName = (string)ViewBag.ContainerName;
    System.Collections.Generic.List<HQPad.Models.IconItem> icons = (System.Collections.Generic.List<HQPad.Models.IconItem>) ViewBag.IconList;
    HQPad.Models.IconItem selectedItem = Model != null ? Model : icons.FirstOrDefault();
}

<script type="text/javascript">
    $(document).ready(function () {
        var containerSelector = '.@Html.Raw(containerName)';
        $(containerSelector + ' ul li img').click(function (event) {
            event.preventDefault();

            var $this = $(this);
            var file = $this.attr('data-file');

            var container = $this.parents('.@Html.Raw(containerName)');

            if (!container || container.length == 0)
                return;

            var hidden = $('input[type=hidden]', container[0])[0];
            $(hidden).val(file);

            var preview = $(container).find('.preview')[0];
            var src = $(preview).attr('src');
            $(preview).attr('src', src.substring(0, src.lastIndexOf('/') + 1) + file);
        });

        $(containerSelector + ' ul li img').hover(function (event) {
            event.preventDefault();
            $(this).addClass('hover');
        },
        function (event) {
            event.preventDefault();
            $(this).removeClass('hover');        
        });
    });
</script>

<div class="icon-picker @Html.Raw(!string.IsNullOrEmpty(containerName) ? containerName : string.Empty)">
    <input type="hidden" id="@Html.Raw(hiddenFieldName)" name="@Html.Raw(hiddenFieldName)" value="@Html.Raw(selectedItem != null ? selectedItem.File : string.Empty)" />
    
    <div class="preview-container">
        <h3>Preview:</h3>
        <img class="preview" src="/Content/Images/icons/equipment/@Html.Raw(selectedItem != null ? selectedItem.File : string.Empty)" alt="selected icon" />
    </div>

    <div class="list-container">
        <h3>Available icons:</h3>
        <ul>
            @foreach (HQPad.Models.IconItem icon in icons)
            {
                <li @if (selectedItem != null && selectedItem.File == icon.File) { @Html.Raw("class=\"selected\"") }>
                    <img src="@Html.Raw(icon.RelativePath)" data-file="@Html.Raw(icon.File)" />
                </li>
            } 
        </ul>
    </div>
</div>

